<form nz-form [formGroup]="form">
  <nz-card [nzBordered]="false" nzTitle="条件定义" [nzExtra]="listFieldExtraTemplate">
    <nz-table formArrayName="items" [nzScroll]="{ y: '240px', x: '1300px' }" [nzShowPagination]="false" [nzData]="data">
      <thead>
        <tr>
          <th
            nzLeft
            [nzChecked]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
            [nzWidth]="'50px'"
          ></th>
          <th nzLeft [nzWidth]="'150px'">代码</th>
          <th nzLeft [nzWidth]="'150px'">名称</th>
          <th [nzWidth]="'100px'">值类型</th>
          <th [nzWidth]="'100px'">输入方式</th>
          <th [nzWidth]="'100px'">默认值</th>
          <th [nzWidth]="'100px'">条件类型</th>
          <th [nzWidth]="'100px'">国际化代码</th>
        </tr>
      </thead>
      <tbody *ngIf="data" cdkDropList>
        <tr *ngFor="let item of data; let i = index" [formGroupName]="i" cdkDrag>
          <td [nzChecked]="setOfCheckedId.has(item.id!)" (nzCheckedChange)="onItemChecked(item.id!, $event)"></td>
          <td>
            <nz-form-control nzErrorTip="请输入条件代码">
              <input
                nz-input
                formControlName="code"
                [(ngModel)]="item.code"
                placeholder="请输入条件代码"
                (ngModelChange)="codeChange(item)"
              />
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请输入条件名称">
              <input nz-input formControlName="name" [(ngModel)]="item.name" placeholder="请输入条件名称" />
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请选择类型">
              <nz-select formControlName="type" [(ngModel)]="item.type" [nzPlaceHolder]="'请选择类型'" [nzShowSearch]="true">
                <nz-option *ngFor="let i of fieldTypes" [nzLabel]="i.value!" [nzValue]="i.key"></nz-option>
              </nz-select>
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请输入格式化">
              <nz-select formControlName="format" [(ngModel)]="item.format" [nzPlaceHolder]="'请选择'" nzAllowClear [nzShowSearch]="true">
                <nz-option *ngFor="let i of formatTypes" [nzLabel]="i.value!" [nzValue]="i.key"></nz-option>
              </nz-select>
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请输入格式">
              <input nz-input formControlName="pattern" [(ngModel)]="item.pattern" placeholder="请输入格式" />
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请输入宽度">
              <nz-select formControlName="widget" [(ngModel)]="item.widget" [nzPlaceHolder]="'请选择类型'" [nzShowSearch]="true">
                <nz-option *ngFor="let i of widgetTypes" [nzLabel]="i.value!" [nzValue]="i.key"></nz-option>
              </nz-select>
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请输入条件名称">
              <input nz-input formControlName="value" [(ngModel)]="item.value" placeholder="请输入条件名称" />
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请输入宽度">
              <nz-select formControlName="operator" [(ngModel)]="item.operator" [nzPlaceHolder]="'请选择类型'" [nzShowSearch]="true">
                <nz-option *ngFor="let i of operatorTypes" [nzLabel]="i.value!" [nzValue]="i.key"></nz-option>
              </nz-select>
            </nz-form-control>
          </td>
          <td>
            <nz-form-control nzErrorTip="请输入国际化代码">
              <input nz-input formControlName="i18n" [(ngModel)]="item.i18n" placeholder="请输入国际化代码" />
            </nz-form-control>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
  <ng-template #widthAddOnAfterTemplate>
    <nz-select [ngModel]="'px'">
      <nz-option nzLabel="px" nzValue="px"></nz-option>
      <nz-option nzLabel="%" nzValue="%"></nz-option>
    </nz-select>
  </ng-template>
  <ng-template #listFieldExtraTemplate>
    <nz-button-group>
      <button nz-button (click)="addLine()">添加行</button>
      <button nz-button (click)="deleteLine()">删除行</button>
    </nz-button-group>
  </ng-template>
</form>
